<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情页面</title>
    <!--bootstrap-->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../js/CacheUtil.js"></script>
    <script src="../js/HttpUtil.js"></script>
    <script src="../js/OrdersUtils.js"></script>
    <script src="../js/UserCacheUtil.js"></script>
</head>
<body>
<!--导入页面公共头部-->
<div class="Top_header"></div>

<div class="panel panel-default" style="margin: 0 auto;width: 95%;" id="orderDetailsBox">
    <div class="panel-heading">
        <h3 class="panel-title"><span class="glyphicon glyphicon-equalizer"></span>&nbsp;&nbsp;订单详情</h3>
    </div>
    <div class="panel-body" >
        <table cellpadding="0" cellspacing="0" align="center" width="100%"
               class="table table-striped table-bordered table-hover" >

            <tr>
                <td>订单编号:</td>
                <td>{order.oId}</td>
                <td>订单生成时间:</td>
                <td>{order.oCreateTime}</td>
            </tr>
            <tr>
                <td>收件人:</td>
                <td>{order.address.aName}</td>
                <td>联系电话:</td>
                <td>{order.address.aPhone}</td>
            </tr>
            <tr>
                <td>送货地址:</td>
                <td>{order.address.aDetail}</td>
                <td>总价:</td>
                <td>￥{order.oCount}</td>
            </tr>
            <tr>
                <td align="left" colspan="4" >
                    <span>订单评价：</span>
                    <br>
                    <sprn style="font-size: 25px">{order.oAssess}</sprn>
                </td>
            </tr>
            <tr>
                <td align="right" colspan="4" style="margin-right: 40px;">
                    <a href="order.html" class="btn btn-danger btn-sm">返回订单列表</a>
                    &nbsp;&nbsp;
                    <!--   js 动态判断订单状态    -->
                    ForPay
                </td>
            </tr>
            <tr>
                <td align="right" colspan="4" style="margin-right: 40px; ">
                    <button style="width: 80px ; height: 40px" onclick="deleteOrders();">删除订单</button>
                </td>
            </tr>
        </table>
    </div>
</div>


<script>
    //获取上一个页面存储的后端数据
    var o = getOrder();
    var order = JSON.parse(o);
    console.log('从上一个页面获取的后端数据');
    console.log(order);
    $(drawingOrderDetails(order));  //替换字段
    $(".Top_header").load("/shop-app/include/header.html");
    // $(orderDetailsInfo(order)); //渲染

    //删除订单
    function deleteOrders() {
        let oId = order.oId ;
        //获取当前页面的订单编号
        console.log('点击删除订单按钮获取到的订单编号：');
        console.log(oId);

        if (confirm("是否要删除该订单数据！")){
            //确认后发送Ajax请求(请求参数：oId订单编号)
            $.ajax({
                url: '/shop-api/orders/deleteOrderByOid',
                type: 'post',
                data: JSON.stringify({
                    oId: oId
                }),
                contentType: "application/json",
                success: function () {
                    console.log('将要跳转至订单页面');
                    // 页面跳转(重定向)
                    $(window).attr('location', '/shop-app/orders/order.html');
                }
            })
        }

    }
</script>
</body>
</html>